<template>
    <div ref="chartMap" style="width: 100%; height: 600px;"></div>
</template>

<script setup lang="js">
import * as echarts from 'echarts';
import { ref, reactive, onMounted } from 'vue';
import 'echarts/map/js/china.js';

const chartMap = ref(); // 图表容器
const cityData = reactive([]); // 存储城市数据

// 城市坐标
const cityCoordinates = {
    重庆: [106.504962, 29.533155],
    北京: [116.407526, 39.90403],
    广东: [113.26641, 23.132324],
    上海: [121.473701, 31.230416],
    浙江: [120.153576, 30.287459],
    安徽: [117.283042, 31.86119],
    天津: [117.19937, 39.0851],
    四川: [104.065735, 30.659462],
    山东: [117.000923, 36.675807],
    江苏: [118.763232, 32.061707]
};

const jsonData = {
    重庆: 53691,
    北京: 103673,
    广东: 343595,
    上海: 111772,
    浙江: 109989,
    安徽: 71127,
    天津: 45971,
    四川: 54739,
    山东: 76002,
    江苏: 111510
};

// 初始化图表
function initChart() {
    const myChart = echarts.init(chartMap.value);

    // 数据映射到点坐标
    const maxValue = Math.max(...Object.values(jsonData).filter(value => typeof value === 'number'));
    const minValue = Math.min(...Object.values(jsonData).filter(value => typeof value === 'number'));

    const mappedData = Object.keys(cityCoordinates).map(key => ({
        name: key,
        value: [...cityCoordinates[key], jsonData[key]]
    }));

    const option = {
        title: {
            text: '全国热门城市充电桩数量',
            top:50,
            left: 'center',
            textStyle: {
                color: '#fff',
                fontSize: 25,
                fontFamily: 'YouYuan'
            }
        },
        tooltip: {
            trigger: 'item',
            formatter: function (params) {
                return `${params.name}: ${params.value[2] || 0}`;
            }
        },
        geo: {
            map: 'china',
            roam: true,
            label: {
                show: true,
                color: '#fff'
            },
            itemStyle: {
                areaColor: '#3a7fd5',//地图背景
                borderColor: '#fff',
                borderWidth: 1
            },
            emphasis: {
                itemStyle: {
                    areaColor: '#2a8cd9'
                },
                label: {
                    show: true
                }
            }
        },
        visualMap: {
            type: 'piecewise', // 分段区间图例
            left: 'left',
            bottom: '10%',
            pieces: [
                { min: 300000, label: '≥ 300,000', color: '#8A2BE2' }, // 紫色
                { min: 150000, max: 299999, label: '150,000 - 299,999', color: '#4169E1' }, // 蓝色
                { min: 100000, max: 149999, label: '100,000 - 149,999', color: '#00CED1' }, // 青蓝色
                { min: 50000, max: 99999, label: '50,000 - 99,999', color: '#32CD32' }, // 绿色
                { max: 49999, label: '< 50,000', color: '#ADFF2F' } // 浅绿色
            ],
            textStyle: {
                color: '#fff'
            }
        },
        series: [{
            type: 'effectScatter',
            coordinateSystem: 'geo',
            data: mappedData,
            symbolSize: (val) => Math.max(10, val[2] / maxValue * 20), // 根据数值调整大小
            rippleEffect: {
                scale: 5,
                period: 4,
                brushType: 'fill' // 波纹填充颜色
            },
            itemStyle: {
                color: '#FF4500' // 波纹点的颜色
            }
        }]
    };

    myChart.setOption(option);
}

onMounted(() => {
    initChart(); // 初始化图表
});
</script>

<style lang="css" scoped>
body {
    background-color: #000;
    color: #fff;
}

.chart-container {
    margin: 0 auto;
}
</style>
